<template>
  <panel title="注册" type="panel-primary login-panel"
         pstyle="-webkit-box-shadow: 0 0 50px rgba(0, 0, 0, .2);box-shadow: 0 0 50px rgba(0, 0, 0, .2);">
    <div slot="body">
      <div style="text-align: center;margin-bottom: 20px">
        <div class="sking-admin-logo">{{ $t("message.title") }}</div>
      </div>
      <el-form ref="form" :model="form" label-width="80px" status-icon :rules="rules" v-loading="loading"
               label-position="right">
        <el-form-item label="账号：" prop="name" :error="error">
          <el-input v-model="form.name" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：" prop="email" :error="error">
          <el-input v-model="form.email" auto-complete="off" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item label="手机号：" prop="phone" :error="error">
          <el-input v-model="form.phone" auto-complete="off" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="pass">
          <el-input v-model="form.pass" type="password" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <div style="margin-top: 80px;">
          <el-button type="success" style="width: 100%;" @click="submitForm('form')">提交</el-button>
        </div>
      </el-form>
    </div>
  </panel>
</template>

<script>

  import Panel from '../components/Panel.vue'
  import {User} from '../utils/resource'
  import {validateForm, validFieldExists} from '../utils/element-helper'

  export default {
    name: 'register',
    data() {
      return {
        form: {
          name: '',
          pass: '',
        },
        error: "",
        loading: false,
        rules: {
          name: [
            {required: true, message: '账号不能为空', trigger: 'blur'},
            {
              validator: (rule, value, callback) => {
                this.validateExists(rule, value, callback)
              }, trigger: 'blur'
            }
          ],
          email: [
            {required: true, message: '邮箱地址不能为空', trigger: 'blur'},
            {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur']},
            {
              validator: (rule, value, callback) => {
                this.validateExists(rule, value, callback)
              }, trigger: 'blur'
            }
          ],
          phone: [
            {required: true, message: '手机号码不能为空', trigger: 'blur'},
            {pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码'},
            {
              validator: (rule, value, callback) => {
                this.validateExists(rule, value, callback)
              }, trigger: 'blur'
            }
          ],
          pass: [
            {required: true, message: '密码不能为空', trigger: 'blur'},
            {min: 5, max: 25, message: '密码长度在 5 到 25 位之间', trigger: 'blur'},
          ],
        }
      }
    },
    methods: {
      submitForm(formName) {
        validateForm(this, formName, () => this._submit(formName))
      },
      async _submit() {
        this.loading = true
        await User.register(this.form)
        this.loading = false
        this.$alert('点击确定或3秒后自动跳转登录界面', '注册成功', {
          confirmButtonText: '确定',
          callback: () => {
            this.$router.push({path: "/login"})
          }
        })
        setTimeout(() => {
          this.$router.push({path: "/login"})
        }, 3000)
      },
      validateExists(rule, value, callback) {
        validFieldExists(rule, value, callback, true, (rule, value) => User.registerCheckExists(rule, value))
      }
    },
    components: {Panel},
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .login-panel {
    width: 350px;
    min-height: 400px;
    margin: 100px auto;
  }

  .register-div {
    margin: 50px 0 20px 0;
    text-align: center;
    font-size: 13px;
  }

</style>
